<template>
  <div>
    <input type="button" value="加载" @click="load">
    <input type="button" value="卸载" @click="unload">
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
import Comprehensive from './Comprehensive';
import {demoServer} from '@/api/installServer';

@Component({
  name: 'ComprehensiveTest',
  components: {
  },
  mixins: [MapCommon],
})
export default class ComprehensiveTest extends Vue {

  private mapId: string = '';
  private getComponent: any ;

  private mounted() {
    // 地图容器id
    this.mapId = 'map';
    (this as any).resolveMap(this.mapId).then((data: any) => {
      this.init(data.map);
    });
  }

  //  地图加载完成后，初始化
  private init(map: any) {
    const temp: any = this;
    // 地图配置
    const mapConfig = temp.$ioc.resolve(`mapConfig-${this.mapId}`);
    // 符号配置
    const symbolConfig = temp.$ioc.resolve(`symbolConfig-${this.mapId}`);
    // 通用的地图组件实例
    const GISComponents = temp.$ioc.resolve(`GISComponents-${this.mapId}`);
    //
    const component = new Comprehensive({
      map,
      symbolConfig,
      simpleRenderMgr: GISComponents.simpleRenderMgr,
      popupManager: GISComponents.popupManager,
      PointGeometryBuilder: GISComponents.PointGeometryBuilder,
      featureLocate: GISComponents.featureLocate,
      featureHighlight: GISComponents.featureHighlight,
      service: demoServer,
    });
    this.getComponent = () => {
      return component;
    };

    component.on('popup', (data: any) => {
      new Vue({
        el: '#' + data.containerId,
        template: '<b>{{text}}</b>',
        data(){
          return {
            text: data.data.id,
          };
        }
      });
    });
  }

  private load() {
    this.getComponent().load();
  }

  private unload() {
    this.getComponent().unload();
  }
}
</script>
<style lang="less" scoped>
</style>